<template>
  <div class="mian">
    <!-- <img
      :src="getimg(Userf[0].headAddress)"
      alt="找不到图片"
      width="144"
      height="144"
    /> 
    <dl v-for="Users in Userf" :key="Users.id">
      <dt></dt>
    </dl> -->
    <div class="headAddress">
      <img
        src="../../assets/images/2.jpg"
        alt="找不到图片"
        width="100%"
        height="100%"
      />
    </div>
    <div class="NickName">
      <div class="nick_titie">
        <h1 style="float: left">还是明</h1>
        <el-button plain style="float: right">编辑个人资料</el-button>
      </div>
      <div>所在地区：广西 - 南宁市 年龄：00后</div>
      <div>介绍我的个人信息</div>
    </div>
    <div class="Playlist">
      <h1>我创建的歌单</h1>
      <hr />
      <dl>
        <dt> 
            <img
              src="../../assets/images/1.jpg"
              alt="找不到图片" 
              width="144"
              height="144"
            /> 
        </dt>
        <dd class="c_title">
          <a href="#">xxx</a>
        </dd>
        <dd>
          <a href="#">by:xxx</a>
        </dd>
      </dl>
            <dl>
        <dt> 
            <img
              src="../../assets/images/1.jpg"
              alt="找不到图片" 
              width="144"
              height="144"
            /> 
        </dt>
        <dd class="c_title">
          <a href="#">xxx</a>
        </dd>
        <dd>
          <a href="#">by:xxx</a>
        </dd>
      </dl>
            <dl>
        <dt> 
            <img
              src="../../assets/images/1.jpg"
              alt="找不到图片" 
              width="144"
              height="144"
            /> 
        </dt>
        <dd class="c_title">
          <a href="#">xxx</a>
        </dd>
        <dd>
          <a href="#">by:xxx</a>
        </dd>
      </dl>
            <dl>
        <dt> 
            <img
              src="../../assets/images/1.jpg"
              alt="找不到图片" 
              width="144"
              height="144"
            /> 
        </dt>
        <dd class="c_title">
          <a href="#">xxx</a>
        </dd>
        <dd>
          <a href="#">by:xxx</a>
        </dd>
      </dl>
            <dl>
        <dt> 
            <img
              src="../../assets/images/1.jpg"
              alt="找不到图片" 
              width="144"
              height="144"
            /> 
        </dt>
        <dd class="c_title">
          <a href="#">xxx</a>
        </dd>
        <dd>
          <a href="#">by:xxx</a>
        </dd>
      </dl>
            <dl>
        <dt> 
            <img
              src="../../assets/images/1.jpg"
              alt="找不到图片" 
              width="144"
              height="144"
            /> 
        </dt>
        <dd class="c_title">
          <a href="#">xxx</a>
        </dd>
        <dd>
          <a href="#">by:xxx</a>
        </dd>
      </dl>
            <dl>
        <dt> 
            <img
              src="../../assets/images/1.jpg"
              alt="找不到图片" 
              width="144"
              height="144"
            /> 
        </dt>
        <dd class="c_title">
          <a href="#">xxx</a>
        </dd>
        <dd>
          <a href="#">by:xxx</a>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Userf: [],
      getimg(src) {
        return require("../../assets/images/" + src);
      },
    };
  },
  mounted() {
    //获取ID
    var id = this.$route.query.uid;
    this.GetUserByID(id);
  },
  methods: {
    GetUserByID(id) {
      var thisvue = this;
      this.$http
        .get("http://localhost:31551/api/Users/GetUserByID/" + id)
        .then(function (res) {
          thisvue.Userf = res.data;
        });
    },
  },
};
</script>

<style>
.headAddress {
  width: 300px;
  height: 300px;
  float: left;
  padding-top: 20px;
}
.NickName {
  float: left;
  height: 320px;
  width: 850px;
  background-color: rebeccapurple;
  margin-left: 50px;
}
.nick_titie {
  padding-top: 20px;
  border-bottom: 1px solid #fff;
  padding-bottom: 50px;
} 
.Playlist dl{
  float: left;
  margin-left: 20px;
}
</style>